
<template>
  <div>
    <el-form ref="form" :model="form" label-width="120px"  :inline="true" size="small"  :rules="rules" >
      <el-form-item label="API 名称：" prop="name">
        <el-input v-model="form.name" class="short"></el-input>
      </el-form-item>
      <el-form-item label="API 编码：" prop="code">
        <el-input v-model="form.code" class="short"></el-input>
      </el-form-item>
      <el-form-item label="API URL：" prop="url">
        <el-input v-model="form.url" class="short"></el-input>
      </el-form-item>
      <el-form-item label="请求方式：" prop="method">
        <el-select v-model="form.method" placeholder="请选择" class="short">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="权限编码：" prop="authCode">
        <el-input v-model="form.authCode" class="short"></el-input>
      </el-form-item>
      <el-form-item label="分类：" prop="category">
        <el-select v-model="form.category" placeholder="请选择" class="short">
          <el-option
              v-for="item in calList"
              :key="item.id"
              :label="item.dicDisplay"
              :value="item.dicDisplay">
          </el-option>
        </el-select>
<!--        <el-input v-model="form.category" class="short"></el-input>-->
      </el-form-item>
      <el-form-item label="API描述：" required>
        <div id="editorApiForm"></div>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
import E from "wangeditor"

let defaultForm = {
  "authCode": "",
  "category": "",
  "code": "",
  "method": "",
  "name": "",
  "remark": "",
  "url": ""
}
export default {
  name: "apiForm",
  mounted() {
    this.getDicsByCriteria()
    this.editor = new E("#editorApiForm")
    this.editor.create()
  },
  methods:{
    getDicsByCriteria(){
      let params = {
        dicParentId: 12,
        page:0,
        pageSize:100
      }
      this.$api.getDicsByCriteria(params).then(res=>{
        this.calList = res.data.data
      })
    },
    setData(data){
      this.$nextTick(()=>{
        Object.keys(this.form).forEach(x=>{
          this.form[x] = data[x]
        })
        this.editor.txt.html(data.apiDesc)
      })
    },
    getData(){
      return new Promise((res,rej)=>{
        this.$refs.form.validate(v=>{
          if(v){
            res({
              ...this.form,
              apiMethodAddVO:{
                apiDesc:this.editor.txt.html(),
              }
            })
          }
        })
      })
    },
  },
  data(){
    return {
      editor:null,
      form:{
        ...defaultForm
      },
      rules:{
        url: [{ required: true, message: '必填' }],
        name: [{ required: true, message: '必填',  }],
        method: [{ required: true, message: '必填',  }],
        code: [{ required: true, message: '必填',}],
        category: [{ required: true, message: '必填',  }],
        authCode: [{ required: true, message: '必填',  }],
      },
      calList:[],
      options:[
          {
            value:'GET',
            label:'GET'
          },{
            value:'POST',
            label:'POST'
          },{
            value:'PUT',
            label:'PUT'
          },{
            value:'DELETE',
            label:'DELETE'
          },
      ],
    }
  },
}
</script>

<style scoped>
#editorApiForm{
  width: 650px;
}
.short{
  width: 260px;
}
.long{
  width: 650px;
}

</style>